<template>
  <div class="updateaddress">
   <header-bar :text="title" :left="left" ></header-bar>
    <div class="addaddr-ts">
        <p>提示用户需用该地址充币：深圳市南山区西丽TCL国际E 城F5栋12楼</p>
    </div>
    <div class="addaddr-content">
        <div class="mc_head">币种</div>
        <div class="mc_select" @click="selectMoney()">
            <span>{{popup}}</span>
            <i class="iconfont icon-you"></i>      
        </div>
    </div>
    <div class="addaddr-content">
        <div class="mc_head">地址</div>
        <input type="text" placeholder="请填写地址" v-model="address">
    </div>
    <div class="postaddbtnbg">
        <div class="postaddbtn" @click="updateaddr()">确认修改</div>
        <div @click="deladdr()">删除地址</div>
    </div>
    <div class="addwxts">
        <div class="addr_wxts_u">
        <b>温馨提示：</b>
        <p>1、提币原路返回。</p>
    </div>
    </div>
    <mt-popup
        v-model="popupVisible">
        <div class="m_fade">
          <div class="mf_h">选择提币类型</div>
            <ul>
              <li>BTC</li>
              <li>EOS</li>
              <li>ETH</li>
            </ul>
        </div>
      </mt-popup>
  </div>
</template>
<script>
import headerBar from "../main/header";
import { Header, Toast, MessageBox, Popup } from "mint-ui";
import { deladdress, findaddress, updateaddress } from "../../api/api.js";
export default {
  name: "AddAddress",
  data() {
    return {
      msg: "",
      addrList: [],
      popupVisible: false,
      popup: "BTC",
      address: "",
      id: "",
      title: "修改地址",
      left: {
        status: true
      }
    };
  },
  components: {
    headerBar
  },
  methods: {
    selectMoney: function() {
      this.popupVisible = true;
    },
    updateaddr() {
      let para = {
        token: sessionStorage.getItem("token")
          ? JSON.parse(sessionStorage.getItem("token"))
          : "",
        id: this.id,
        coinType: this.popup,
        address: this.address
      };
      updateaddress(para)
        .then(res => {
          Toast({
            message: res.msg,
            position: "bottom",
            duration: 5000
          });
          if (res.code == 200) {
            this.$router.push({ path: "/address" });
          }
        })
        .catch(err => {
          Toast({
            message: "请求超时",
            position: "bottom",
            duration: 5000
          });
        });
    },
    getaddress() {
      let para = {
        id: this.id,
        token: sessionStorage.getItem("token")
          ? JSON.parse(sessionStorage.getItem("token"))
          : ""
      };
      findaddress(para)
        .then(res => {
          this.popup = res.data.coinType;
          this.address = res.data.address;
        })
        .catch(err => {
          Toast({
            message: "请求超时",
            position: "bottom",
            duration: 5000
          });
        });
    },
    deladdr() {
      let para = {
        token: sessionStorage.getItem("token")
          ? JSON.parse(sessionStorage.getItem("token"))
          : "",
        id: this.id
      };
      MessageBox.confirm("确定要删除吗？").then(action => {
        deladdress(para)
          .then(res => {
            Toast({
              message: res.msg,
              position: "bottom",
              duration: 5000
            });
            if (res.code == 200) {
              this.$router.push({ path: "/address" });
            }
          })
          .catch(err => {
            Toast({
              message: "请求超时",
              position: "bottom",
              duration: 5000
            });
          });
      });
    }
  },
  mounted() {
    this.id = this.$route.params.id;
    this.getaddress();
    var mFade = document.getElementsByClassName("m_fade")[0];
    var oLi = mFade.getElementsByTagName("li");
    var that = this;
    for (let i = 0; i < oLi.length; i++) {
      oLi[i].onclick = function() {
        that.popupVisible = false;
        that.popup = this.innerHTML;
      };
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import url("../../../static/css/address.css");
</style>
